<!DOCTYPE html>
<meta charset="UTF-8">
<html>
	<head>
		<title>数独游戏</title>
		<style>
			body {
				color: #4e89aa;
				font-family: Arial, sans-serif;
				font-size: 40px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				min-height: 100vh;
				margin: 0;
				/* background-color: #f0f0f0; */
				/* 浅灰色背景 */
				background-image: url('./sudoku-background.png'); /* 使用正确的图片文件名和路径 */
				background-size: cover; /* 确保背景图片覆盖整个页面 */
				background-position: center; /* 将背景图片居中显示 */
				background-attachment: fixed; /* 背景图片固定，不随滚动条滚动 */
			}

			.sudoku-grid {
				display: grid;
				grid-template-columns: repeat(9, 80px);
				grid-template-rows: repeat(9, 80px);
				gap: 5px;
				/* 增加间隙以突出每个单元格 */
				padding: 5px;
				background-color: #fcebe6;
				/* 淡蓝色背景 */
				border-radius: 10px;
				/* 圆角边框 */
			}

			.sudoku-cell {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #ffffff;
				/* 白色单元格 */
				border-radius: 40px;
				/* 单元格圆角 */
			}


			
			/* 加粗顶部边框 */
			.sudoku-cell:nth-child(-n+9) {
			    border-top: 3px solid #ffd9ce;
			}
			
			/* 加粗左侧边框 */
			.sudoku-cell:nth-child(9n+1) {
			    border-left: 3px solid #ffd9ce;
			}
			
			/* 加粗底部边框 */
			.sudoku-cell:nth-child(-n) {
			    border-left: 3px solid #ffd9ce;
			}
			
			/* 加粗右侧和底部的边框 */
			.sudoku-cell:nth-child(3n) {
				border-right: 3px solid #ffd9ce;
			}
			.sudoku-cell:nth-child(n+19):nth-child(-n+27),
			/* 第三行 */
			.sudoku-cell:nth-child(n+46):nth-child(-n+54),
			.sudoku-cell:nth-last-child(-n+9){
				/* 第六行 */
				border-bottom: 3px solid #ffd9ce;
			}


			.sudoku-input {
				width: 100%;
				height: 100%;
				border: none;
				text-align: center;
				font-size: 40px;
				background-color: transparent;
				color: #e9a29d;
				/* 深色文字 */
			}

			/* 确保其他样式与之前的保持一致 */

			button {
				background-color: #509ac2;
				/* 明亮的粉红色 */
				color: white;
				border: none;
				padding: 40px 60px;
				margin: 20px;
				border-radius: 5px;
				cursor: pointer;
				font-size: 30px;
				border-radius: 40px;
			}


			button:hover {
				background-color: #fed2c9;
			}

		</style>
	</head>
	<body>
		<h1>数独游戏</h1>
		<div id="sudokuGrid" class="sudoku-grid">
			<!-- 单元格将在这里动态生成 -->
		</div>
		<div>
			<button onclick="generateSudoku()">生成数独</button>
			<button onclick="solveSudoku()">解决数独</button>
		</div>
		<script src="js/sudokuSolver.js"></script>
	</body>
</html>
